<template>
	<view class="act-item rounded-xxxl pl-2-2 py-2-2" @click="toDetail" :class="[mb ? 'mb-2-2' : '']">
		<view class="row-center mb-2-2" v-if="!data.isPermanently && actTimeDetail.dateText">
			<text class="color-white text-s">{{ actTimeDetail.prefixText }}</text>
			<view class="rounded-xxl px-1 bg-active px-1 mx-1-3">
				<text class="color-white text-s">{{ actTimeDetail.dateText }}</text>
			</view>
			<text class="color-white text-s">{{ actTimeDetail.suffixText }}</text>
		</view>
		<view v-else class="mb-2-2">
			<text class="color-white text-s">长期活动</text>
		</view>
		<view class="flex flex-row items-stretch mb-2-2">
			<view style="width: 200rpx; height: 200rpx">
				<image :src="actTypeDetail.imgSrc" style="width: 200rpx; height: 200rpx"></image>
			</view>
			<view class="flex-1 text-center flex flex-column justify-between mr-2-2">
				<text class="color-white text-m">{{ data.activityDetailName }}</text>
				<text class="text-m" style="color: #af4571">{{ actCarrierDetail.name || '--' }}</text>
			</view>
			<view style="border: 0; border-right: 2px dashed #fff" />
			<view class="text-center flex flex-column justify-between" style="width: 220rpx">
				<text class="text-xxxl color-white">{{ actTypeDetail.operText }}</text>
				<text class="text-xxxl color-white">
					{{ operValue }}
				</text>
				<!-- backgroundColor: disabledAction ? '#eeeeee' : '#07c160',
						color: disabledAction ? '#8FB5A2' : '#fdf6e5', -->
				<view
					class="text-center py-1-1 rounded-xl mx-auto"
					style="width: 130rpx; background-color: #07c160; color: #fdf6e5; border: 1px solid #797979"
					:style="{
						opacity: disabledAction || disabled ? 0.4 : 1
					}"
					:hover-class="disabledAction || disabled ? '' : 'opacity-50'"
					hover-start-time="0"
					hover-stay-time="0"
					@click.stop="handleAction"
				>
					<text class="text-m" style="color: #fdf6e5">{{ actTypeDetail.actionText }}</text>
				</view>
			</view>
		</view>
		<view class="row-center">
			<view class="flex-1 text-center" :style="{ visibility: actTimeDetail.startText ? 'visible' : 'hidden' }">
				<text class="color-white text-s">活动期限：{{ actTimeDetail.startText }} - {{ actTimeDetail.endText }}</text>
			</view>
			<view
				style="width: 220rpx; margin-left: 2px"
				class="text-center"
				:style="{ visibility: data.isObtainLimit ? 'visible' : 'hidden' }"
			>
				<text class="color-white text-s">每人限购{{ data.obtainLimitNum }}份</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import dateUtil from '@/uni-sdk/utils/date.js';
import { ActType, ActTypeDetail, ActCarrier, ObtainWays } from '@/base/common-data.js';
import { handleJoinAct } from '@/base/common-business.js';

const props = defineProps({
	data: Object,
	disabled: Boolean,
	mb: {
		type: Boolean,
		default: true,
	},
});
const emits = defineEmits(['join']);

const now = new Date();
const nowTime = +now;
const actTimeDetail = computed(() => {
	const startPeriod = props.data.startPeriod;
	const endPeriod = props.data.endPeriod;
	let prefixText = '';
	let dateText = '';
	let suffixText = '';
	let startText = '';
	let endText = '';
	if (startPeriod && endPeriod) {
		startText = dateUtil.format(startPeriod, 'yyyy-MM-dd');
		endText = dateUtil.format(endPeriod, 'yyyy-MM-dd');
		if (nowTime < startPeriod) {
			prefixText = '下轮活动将于';
			dateText = dateUtil.format(startPeriod, 'yyyy-MM-dd hh:mm:ss');
			suffixText = '开始';
		} else if (nowTime >= startPeriod && nowTime <= endPeriod) {
			prefixText = '本轮活动将于';
			dateText = dateUtil.format(endPeriod, 'yyyy-MM-dd hh:mm:ss');
			suffixText = '结束';
		} else if (nowTime > endPeriod) {
			prefixText = '本轮活动已于';
			dateText = dateUtil.format(endPeriod, 'yyyy-MM-dd hh:mm:ss');
			suffixText = '结束';
		}
	}
	return {
		prefixText,
		dateText,
		suffixText,
		startText,
		endText,
	};
});
const actTypeDetail = computed(() => {
	let target = ActTypeDetail[props.data.activityType];
	if (!target) {
		target = {
			imgSrc: '/static/default-square.png',
			actionText: '购买',
		};
	}
	return target;
});

const actCarrierDetail = computed(() => {
	let name = '';
	if (props.data.activityCarrier === ActCarrier.coupon) {
		name = props.data.coupons ? props.data.coupons.couponsName : '--';
	} else {
		name = props.data.goods ? props.data.goods.name : '--';
	}
	return {
		name,
	};
});

const operValue = computed(() => {
	const type = props.data.activityType;
	if (type === ActType.tuan || type === ActType.qiang) {
		return '¥' + props.data.consumeValue;
	}
	if (type === ActType.chang || type === ActType.man) {
		if (props.data.activityCarrier === ActCarrier.coupon) {
			return props.data.coupons ? '¥' + props.data.coupons.couponsValue : '--';
		} else {
			return props.data.goods ? '¥' + props.data.goods.price : '--';
		}
	}
	if (type === ActType.jifen) {
		return props.data.consumeValue;
	}
	return '--';
});

const disabledAction = computed(() => {
	return props.data.isObtainLimit && props.data.allowJoinTimes === 0;
});

function toDetail() {
	if(props.disabled) return;
	uni.navigateTo({
		url: '/pages/act-detail/act-detail?id=' + props.data.id,
	});
}

async function handleAction() {
	if(disabledAction.value || props.disabled) return;
	handleJoinAct(actTypeDetail.value.actionText, props.data, (re) => {
		if(re) {
			emits('join');
		}
	});
}
</script>

<style>
.act-item {
	background-image: linear-gradient(90deg, #fe6b10 0%, #ffaf5a 100%);
}
</style>
